import React, { Component } from 'react';
import NewIcon from '../icon/index'
import { Text, View } from '@tarojs/components'
import './index.scss'
type Props = {
  isCheck?: Boolean
  onChange: Function,
  value?: String,
  color?: String
}
type State = {
  check: Boolean
}
export default class Check extends Component<Props> {
  state:State = {
    check: false
  }
  
  constructor(props: Props) {
    super(props);
    this.setState({
      check: props.isCheck
    });
  }

  Change(data: any) {
    const check = this.props.isCheck == true? false: true;
    this.props.onChange(check);
    this.setState({
      check
    });
  }

  render() {
    const { check } = this.state;
    let { value, color, isCheck } = this.props;
    return (
      <View onClick={this.Change.bind(this)} style="display: inline;">
        <View className="switch" style={`${isCheck? `background-color: ${color}; border-color: ${color};`: ''}`}>
          <View className={`switch-child ${isCheck? 'switch-right': ''}`}></View>
          <View 
            className={`switch-bg ${isCheck? 'switch-w80': ''}`} 
            style={`${!isCheck? 'background-color: #fff;': `${color}`}`}
          ></View>
        </View>
      </View>
    )
  }
}
